<!-- 平台信息 -->
<template>
    <div class='page-main'>
        <div class="container">
            <div class="box" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)" title="阿里云余额"
                v-loading="loading" element-loading-text="" element-loading-spinner="el-icon-loading"
                element-loading-background="transparent">
                <div class="left">
                    <p>阿里云余额</p>
                    <p><span>{{ info.AliBalance }}</span>元
                    </p>
                </div>
                <div class="right">
                    <svg class="svg-icon" aria-hidden="true" style="fill: #ff6a00;">
                        <use xlink:href="#icon-ali" />
                    </svg>
                </div>
            </div>
            <div class="box" style="background:linear-gradient(-141deg,#ecca1b,#f39526)" title="百度云余额"
                v-loading="loading" element-loading-text="" element-loading-spinner="el-icon-loading"
                element-loading-background="transparent">
                <div class="left">
                    <p>百度云余额</p>
                    <p>
                        <span>{{
                            info.BaiDuBalance
                        }}</span>
                        元
                    </p>
                </div>
                <div class="right">
                    <svg class="svg-icon" aria-hidden="true" style="color: #f39526;">
                        <use xlink:href="#icon-baidu" />
                    </svg>
                </div>
            </div>
            <div class="box" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)" title="公司账号"
                v-loading="loading" element-loading-text="" element-loading-spinner="el-icon-loading"
                element-loading-background="transparent">
                <div class="left">
                    <p>公司账号</p>
                    <p>{{ info.account }}</p>
                    <p>{{ info.total_money }}元</p>
                </div>
                <div class="right">
                    <i class="el-icon-s-finance"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { platformData } from '@/api/set'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            info: {
                AliBalance: 0,
                BaiDuBalance: 0,
                account: "",
                total_money: 0
            },
            loading: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async platformData() {
            this.loading = true;
            let res = await platformData();
            this.loading = false;
            if (res.status == 1) {
                this.info = res.data;
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.platformData();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.page-main {
    height: calc(100vh - 70px);
}

.container {
    width: 100%;
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-around;

    .box {
        padding: 30px 20px;
        display: flex;
        justify-content: space-between;
        width: 30%;
        height: 40%;
        border-radius: 10px;

        &>.left {
            width: 70%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            &>p {
                color: #fff;
            }

            &>p:nth-of-type(2n-1) {
                font-size: 20px;
            }

            &>p:nth-of-type(3) {
                font-size: 24px;
            }

            &>p:nth-of-type(2n) {
                font-size: 24px;
            }
        }

        &>.right {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30%;
            height: 100%;

            &>i {
                font-size: 100px;
                color: #97d4dc;
            }
        }
    }

    .fontsize20 {
        ::v-deep .el-loading-spinner {
            top: 68%;

            .el-icon-loading {
                font-size: 20px;
            }
        }
    }
}
</style>